<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content>
  <apes-card [apesBordered]="false">

    <div class="boxShowFlex">
      <!-- 日期 -->
      <div apes-col apesSpan="8">
        <div>
          <span>日期：</span>
          <div class="boxDiv">
            <apes-range-picker [(ngModel)]='timeList' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
          </div>
        </div>
        <!--<p [ngStyle]="{ display: hind }"><i class="anticon anticon-exclamation-circle-o"></i> 必填！最大时间为一个月 </p>-->
      </div>
      <!-- 销售组 -->
      <div apes-col apesSpan="8">
        <span>销售组：</span>
        <ng-select style="width: 240px; display: inline-block"
                   typeToSearchText
                   [items]="sale"
                   multiple="true"
                   bindLabel="XSZMC"
                   bindValue="XSZID"
                   placeholder="选填，可多选"
                   [(ngModel)]="saleID"
                   [notFoundText]="'无法找到'">
        </ng-select>
      </div>

      <div apes-col apesSpan="8">
        <span>公司：</span>
        <ng-select style="width: 240px; display: inline-block;"
                   typeToSearchText
                   [items]="companyData"
                   multiple="true"
                   bindLabel="name"
                   bindValue="id"
                   placeholder="选填，可多选"
                   [(ngModel)]="companyList"
                   [notFoundText]="'无法找到'">
        </ng-select>
      </div>
    </div>

    <!-- shujuxianhsi -->
    <div apes-row apesGutter="16">
      <div apes-col nzXs="24" apesMd="8">
        <!-- 饼图  VIP会员数占比-->
        <apes-card [apesBordered]="false" apesTitle="" [apesBodyStyle]="{'padding.px': 24}" class="sales-card"
                   style="min-height: 200px;">

          <apes-pie [hasLegend]="true" [height]="200" [inner]="0" [lineWidth]="1" [data]="salesPieData"
                    [valueFormat]="">
          </apes-pie>

        </apes-card>
      </div>

      <div apes-col nzXs="24" apesMd="8">
        <!-- 柱型图 已出单前5-->
        <apes-card [apesBordered]="false" [apesTitle]="title">
          <ng-template #title>
            新增会员 前5
          </ng-template>
          <apes-bar height="245" [data]="topData" [padding]="[ 35, 35, 45, 45 ]"></apes-bar>
        </apes-card>
      </div>
      <div apes-col nzXs="24" apesMd="8">
        <!-- 柱型图 已出单 后5 -->
        <apes-card [apesBordered]="false" [apesTitle]="titoe">
          <ng-template #titoe>
            新增会员 后5
          </ng-template>
          <apes-bar height="245" [data]="lastData" [padding]="[ 35, 35, 45, 45 ]"></apes-bar>
        </apes-card>
      </div>
    </div>

    <!-- table -->
    <div>
      <ag-grid-angular #grid
                       style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                       enableColResize="true"
                       enableSorting="true"
                       enableFilter="true"

                       suppressLoadingOverlay="true"

                       [rowData]="rowData"
                       [gridOptions]="gridOptions"
                       [columnDefs]="columnDefs"
                       [pinnedBottomRowData]="pinnedBottomRowData">
      </ag-grid-angular>
    </div>

  </apes-card>
</apes-content>
